<template>
	<view class="phone-container">
		<uni-search-bar placeholder="搜索" v-model="params.remark" bgColor="#EEEEEE" @confirm="search" @input="input"
				@cancel="cancel" @clear="clear"/>
		<uni-list>
			<uni-list-item v-for="(item,index) in phoneList" :title="item.remark" :note="item.phoneNumber"
				:rightText="item.createTime"
				thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png">
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	import {
		getPhoneList
	} from '@/api/record/phone.js'

	export default {
		data() {
			return {
				isToEnd:false,
				params:{
					remark:'',
					pageNum: 1,
					pageSize: 13},
				phoneList: [],
				avatarList: [{
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
				}, {
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
				}, {
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
				}]
			}
		},
		onLoad() {
			this.getPhone()
		},
		onReachBottom() {
			if(this.isToEnd){
				return
			}
			console.log(this.isToEnd)
			var index = this.params.pageNum
			this.params.pageNum = index + 1
			var that = this;
			var data = this.params
			getPhoneList(data).then(response => {
				if(response.rows.length < that.params.pageSize){
					that.isToEnd = true;
				}
				for(var item of response.rows){
					that.phoneList.push(item)
				}
				
				console.log(that.phoneList)
			});
		},
		methods: {
			getPhone() {
				this.params.pageNum = 1;
				this.isToEnd=false;
				var data = this.params;
				console.log(data)
				getPhoneList(data).then(response => {
					this.phoneList = response.rows;
				});
			},
			input(){
				console.log("input")
				this.getPhone()
			},
			clear(){
				console.log("clear")
				this.params.remark='';
			},
			cancel(){
				console.log("cancel")
				this.params.remark='';
			},
			search(){
				console.log("search")
				this.getPhone()
			}
		}
	}
</script>

<style>
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	/* #endif */

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}
</style>
